<!-- 搜做面板页 -->
<template>
  <div class="panel">
    <div class="panel-header">
      <div class="icon"
        @click="showSearchPanel(false)">
        <span></span>
      </div>
      <div class="input">
        <img src="../imgs/search.png"
          alt="">
        <input ref="getfocu"
          type="text"
          placeholder="黑色直筒裤女">
      </div>
      <a href="javascript:;">
        搜索
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showSearchPanel: Function
  },
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.$refs.getfocu.focus()
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.panel {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  background-color: #fff;

  .panel-header {
    height: 3.1437rem;
    // background-color red;
    // border-bottom 0.0625rem solid #ddd
    padding: 0.4375rem 0rem 0.4375rem 0.875rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    a {
      width: 3.75rem;
      heihgt: 100%;
      text-align: center;
      line-height: 2.25rem;
      color: #e02e24;
    }

    .icon {
      width: 2.5rem;
      height: 100%;
      // background red
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        display: block;
        width: 0.9375rem;
        height: 0.9375rem;
        border: 0.125rem solid #666;
        transform: rotate(45deg);
        border-color: transparent transparent #ddd #ddd;
      }
    }

    .input {
      flex: 1;
      background: #ededed;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0rem 0.3125rem;
      border-radius: 0.4375rem;

      img {
        display: block;
        padding-right: 0.3125rem;
        width: 1.25rem;
      }

      input {
        flex: 1;
        height: 100%;
        background: none;
        font-size: 1rem;
        outline: none;

        input::-webkit-input-placeholder {
          padding-left: 0.3125rem;
        }
      }
    }
  }
}
</style>
